<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .box {
            width: 400px;
            height: 200px;
            margin: 200px auto;
            position: relative;
        }

        li {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        li img {
            width: 400px;
            height: 200px;
        }

        .add {
            display: block;
        }

        .yi {
            position: absolute;
            width: 220px;
            display: flex;
            justify-content: space-between;
            bottom: 10px;
             margin: 0  80px; 
        }

        span {

            width: 20px;
            height: 20px;
            background-color: salmon;
            border-radius: 50%;
            border: 1px solid #666;
        }

        .one {
            background-color: #666;
        }
    </style>
</head>

<body>

    <div class="box">
        <ul>
            <li class="add"><img src="001.jpg" alt=""></li>
            <li><img src="002.jpg" alt=""></li>
            <li><img src="003.jpg" alt=""></li>
            <li><img src="004.jpg" alt=""></li>
            <li><img src="005.jpg" alt=""></li>
        </ul>

        <div class="yi">
            <span class="one"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

</body>

</html>
<script>
    var lis = document.querySelectorAll('li');
    var span = document.querySelectorAll('span');

    var ad = 0;
    var oo = setInterval(changeImage, 1000);
    function changeImage() {
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = '';
            span[i].className = '';
        }
        ad++;
        if (ad == 5) {
            ad = 0;
        }
        lis[ad].className = 'add';
        span[ad].className = 'one';

    }



    var i;
    for (i = 0; i < span.length; i++) {
        lis[i].index = i;
        span[i].index = i;
        span[i].onmouseover = function () {
            clearInterval(oo);
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = '';
                span[i].className = '';
            }
            lis[this.index].className = 'add';
            span[this.index].className = 'one';
        }
        span[i].onmouseout = function () {
           ad= this.index;
        oo = setInterval(changeImage, 1000);

        }


    }

 

    // var oo = null;
    // function start() {
    //     if (oo != null) {
    //         return;
    //     }


    //     oo = setInterval(add, 1000);


    // }

</script>